<script lang="ts" setup>
import { ref, onMounted, defineProps } from 'vue';

// 定义 props
const props = defineProps<{
	article: {
		createTime: string;
		id: number;
		thumbnail: string;
		title: string;
		viewCount: number;
	};
}>();
const emit = defineEmits(['articleId']);
function getArticleDetail() {
	emit('articleId', props.article.id);
}

// 定义容器的引用
const containerRef = ref<HTMLElement | null>(null);

onMounted(() => {
	const container = containerRef.value;
	if (container) {
		const width = container.clientWidth;
		const height = container.clientHeight;
		const maxSide = Math.max(width, height);
		const newSize = Math.sqrt(2) * maxSide; // 计算根号二倍的较长边

		// 设置伪元素的样式
		const style = document.createElement('style');
		style.innerHTML = `
			.article-card-container::before {
				width: ${newSize}px !important;
				height: ${newSize}px !important;
			}
		`;
		document.head.appendChild(style);
	}
});
</script>

<template>
	<div
		class="article-card-container"
		ref="containerRef"
		@click="getArticleDetail()"
	>
		<div class="img">
			<img :src="article.thumbnail" alt="文章缩略图" class="thumbnail" />
		</div>
		<el-tooltip
			class="box-item"
			effect="dark"
			:content="article.title"
			placement="top"
		>
			<h2 class="title">{{ article.title }}</h2>
		</el-tooltip>

		<div style="display: flex; justify-content: space-between">
			<div class="view-count">浏览次数: {{ article.viewCount }}</div>
			<div class="view-count">
				创建时间:
				{{
					new Date(article.createTime).toLocaleString('zh-CN', {
						year: 'numeric',
						month: '2-digit',
						day: '2-digit',
						hour: '2-digit',
						minute: '2-digit',
						hour12: false, // 24小时制
					})
				}}
			</div>
		</div>
		<button class="read-more" @click="getArticleDetail()">阅读内容</button>
	</div>
</template>

<style lang="less" scoped>
.article-card-container {
	position: relative; /* 为伪元素定位提供上下文 */
	width: 32%;
	max-width: 25vw;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	border-radius: 15px;
	padding: 1.5vw;
	text-align: center;
	transition: all 0.5s ease;
	cursor: pointer;
	z-index: 3;
	/* 移除原有的 background 和 animation */
}

.article-card-container::before {
	content: '';
	position: absolute;
	top: 50%; /* 设置为50%以便于中心对齐 */
	left: 50%; /* 设置为50%以便于中心对齐 */

	transform: translate(-50%, -50%); /* 将伪元素移动到中心 */
	background: linear-gradient(45deg, #e8d2f7, #b0e4f3);
	z-index: -1; /* 确保背景在内容下方 */
	animation: gradient-rotation 5s linear infinite;
	border-radius: 15px;
	transform-origin: center; /* 设置旋转中心为中心点 */
}

@keyframes gradient-rotation {
	from {
		transform: translate(-50%, -50%) rotate(0deg); /* 旋转时保持中心 */
	}
	to {
		transform: translate(-50%, -50%) rotate(360deg); /* 旋转时保持中心 */
	}
}
.article-card-container:hover {
	background: linear-gradient(215deg, #4a4a4d, #1b0b30);
	transform: translateY(-5px);
}

.img {
	width: 100%;
	height: 10vh;
	overflow: hidden;
	.thumbnail {
		width: 100%;
		height: auto;
		border-radius: 10px;
		margin-bottom: 15px;
	}
}

.title {
	height: 10vh;
	font-size: 24px;
	color: var(--theme-text);
	margin: 10px 0;
	text-overflow: ellipsis;
	text-align: left;
	overflow: hidden; /* 隐藏超出部分 */
	display: -webkit-box; /* 使用 WebKit 的 box 模型 */
	-webkit-line-clamp: 2; /* 限制显示两行 */
	-webkit-box-orient: vertical; /* 垂直排列 */
	cursor: pointer;
	&:hover {
		color: #000;
	}
}

.view-count {
	color: var(--theme-color);
	font-size: 0.9em;
	margin-bottom: 1.5vw;
	cursor: pointer;
}

.read-more {
	color: #409eff;
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); /* 添加文字阴影效果 */
	letter-spacing: 4px; /* 增大字间距 */
	font-size: 1.4rem;
	transition: all 0.3s;
}

.read-more:hover {
	transform: scale(1.2); /* 放大 1.5 倍 */
}
</style>
